Modal windows with Javascript and CSS

One of the side projects I spent a little time on today was researching the use of on-page modal dialog boxes using Javascript and CSS that shade or darken the rest of the page while they are open. It looks like it will be an easy job thanks to these two solutions that are made freely available:

• Lightbox Gone Wild: this is a nice solution based on Lightbox and Prototype but a bit heavy weight due to the inclusion of prototype.js. If you haven’t seen the original lightbox effect check it out!
• SubModal: looks like it was started from scratch and is lightweight.

I’m leaning towards subModal right now since Lightbox uses prototype.js which adds 48K to the first page view. We serve around 150,000 unique visitors per day so adding prototype would result in an additional 150 * 48K = 7GB of bandwidth usage per day (we’re not currently running mod_gzip).

Update: here are some other solutions including a draggable one, DHTML Window (draggable but no shading), draggable with shading or fixed position, and Popup Window 4.5

Related reading: Popups with a twist, Sublog: author of subModal’s blog, and Inline popups